<template>
    <div class="SingersBox" v-if="singersList.length!=0">
      <div class="SingersList" v-for="item in singersList" :key="item">
        <img class="img" v-lazy="item.avatar" @click="search1(item.name)">
        <div>
        <p>{{ item.name }}</p>
        <p>单曲:{{ item.playcount }}&nbsp;&nbsp;专辑:{{ item.alcount}}</p>
        </div>
      </div>
  </div>
  <div v-else>
    <!--    <img src="../../../assets/img/img_5.png" class="empty">-->
    <p style="text-align: center">无数据</p>
  </div>
</template>

<script setup>
import {useSongsStore} from "@/Store/Pinia/pinia"
import {baseURL} from "@/request/index.js";
import {onMounted, ref, watch} from 'vue';
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import axios from "axios";
const songsStore=useSongsStore();
const router=useRouter();
const allsimisinger=ref([])
const singersList=ref([])

async function search1(name){
  console.log(name);
  songsStore.show=1;
  songsStore.search(name);
  await router.push({path:'/homePage/searchList'})
}

watch(songsStore.songs,(newvalue)=>{
  allsimisinger.value=[];
  newvalue.forEach((item)=>{
    item.ar.forEach((item)=>{
      if(allsimisinger.value.indexOf(item.id)===-1) {
       allsimisinger.value.push(item.id);
      }
    })
  })
  console.log(allsimisinger.value);
  singersList.value=[];
  allsimisinger.value.forEach((item) => {
    axios.post(baseURL+"/artists?id=" + item).then((res) => {  //搜索
      console.log(res);
      let singer = {
        "avatar": res.data.artist.picUrl,
        "playcount": res.data.artist.musicSize,
        "alcount": res.data.artist.albumSize,
        "id": res.data.artist.id,
        "name":res.data.artist.name,
      }
      singersList.value.push(singer);
    })
    console.log(singersList.value);
  })
},{immediate:true})
onMounted(()=>{
  // getAllsingers()
})
</script>

<style scoped>
.SingersBox{
  display: flex;
  flex-wrap:wrap;
  margin-left: 80px;
}

.SingersBox .SingersList{
  width: 250px;
  height: 250px;
  margin-right: 30px;
  margin-top: 20px;
  text-align: center
}

.SingersBox .SingersList .img{
  width: 180px;
  height: 180px;
  border-radius: 50%;
}
</style>